import styled from 'styled-components'
import useSwitch from '../../hook/switch'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { serverTime } from '../../service'
import Icon from '../../component/Icon'
import { useTranslation } from 'react-i18next'
import { formatSecondCountDown } from '../../utils/time'

const ICON_WIDTH = '81'
const ICON_HEIGHT = '46'

const Container = styled.div`
    display: flex;
    
`
const Inner = styled.div`
    position: relative;
    flex: 1;
    display: flex;
    overflow: hidden;
`

const TradeIcon = styled(Icon)`
    position: absolute;
`

const Content = styled.div`
    flex: 1;
    overflow: hidden;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
`

const Time = styled.span`
    font-size: 10px;
    color: ${(prop) => prop.theme.text.normal};
    line-height: 9px;
    margin-top: 10px;
`

const Title = styled.div`
    font-size: 10px;
    color: ${(prop) => prop.theme.text.normal};
`

interface Props {
    className?: string
}

const Trade: React.FC<Props> = ({ className }) => {
    const { t } = useTranslation();
    const [config] = useSwitch()
    const tradeTime = useMemo(() => config.numberForKey('tradeTime', 0), [config])

    const [leftTime, setLeftTime] = useState(0)
    const [timeStr, setTimeStr] = useState('')

    const time = useCallback(async () => {
        const res = await serverTime()
        return res
    }, [])

    useEffect(() => {
        if (tradeTime <= 0) {
            return
        }

        const format = async () => {
            const res = await time()
            if (!res.success || !res.data) {
                setLeftTime(0)
                return
            }
            setLeftTime(tradeTime - res.data)
        }
        format()
    }, [tradeTime, time])

    useEffect(() => {
        let temp = Math.floor(leftTime / 1000)
        const format = 'DDd:HHh:mmm'
        setTimeStr(formatSecondCountDown(temp, { format }))
        if (temp <= 0) {
            return
        }

        const interval = 1000
        const secondInterval = interval / 1000
        const timer = setInterval(() => {
            temp = temp - secondInterval
            setTimeStr(formatSecondCountDown(temp, { format }))
            if (temp <= 0) {
                clearInterval(timer)
            }
        }, interval)

        return () => {
            clearInterval(timer)
        }
    }, [leftTime])

    return <>
        {leftTime > 0 && <Container
            className={className}
            style={{ width: `${ICON_WIDTH}px`, height: `${ICON_HEIGHT}px` }}
        >
            <Inner>
                <TradeIcon
                    name='home_trade'
                    width={`${ICON_WIDTH}px`}
                    height={`${ICON_HEIGHT}px`}
                />
                <Content>
                    <Title>{t('home.trade.title')}</Title>
                    <Time>{timeStr}</Time>
                </Content>
            </Inner>
        </Container>}
    </>
}

export default Trade